// 背景颜色及点击背景颜色
// -----------------------------------------------------------------------------
.tap-color(@color, @opacity: .9) {
    background-color: @color;

    &:active {
        background-color: @color * @opacity;
    }
}

// 多行文本溢出显示省略号
// -----------------------------------------------------------------------------
.line-clamp(@line: 2, @line-height: .38rem) {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: @line;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    line-height: @line-height;
    max-height: @line-height * @line + .2rem;
}

// 单行文本溢出显示省略号
// -----------------------------------------------------------------------------
.text-overflow(@align: justify) {
    word-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: @align;
}

// 三角形箭头
// -----------------------------------------------------------------------------
// @deg:45deg  - right
//      135deg - down
//      225deg - left
//      315deg - up
// ------------------------------------------------------------------------
.arrow(@color: #444, @width: 10px, @border-width: 1PX, @deg: 45deg) {
    content: '';
    width: @width;
    height: @width;
    display: inline-block;
    border-style: solid;
    border-color: @color;
    border-width: @border-width @border-width 0 0;
    transform: rotate(@deg);
}

// 一像素边框
// -----------------------------------------------------------------------------
.top-line(@color: #e6e6e6, @zindex: 1) {
    content: '';
    position: absolute;
    z-index: @zindex;
    top: 0;
    left: 0;
    width: 100%;
    height: 1PX;
    border-top: 1PX solid @color;
    color: @color;
    transform: scaleY(.5);
    transform-origin: 0 0;
}

.bottom-line(@color: #e6e6e6, @zindex: 1) {
    content: '';
    position: absolute;
    z-index: @zindex;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1PX;
    border-bottom: 1PX solid @color;
    color: @color;
    transform: scaleY(.5);
    transform-origin: 0 100%;

}

.left-line(@color: #ccc, @zindex: 0) {
    content: '';
    position: absolute;
    z-index: @zindex;
    top: 0;
    left: 0;
    height: 100%;
    border-left: 1PX solid @color;
    color: @color;
    transform: scaleX(.5);
    transform-origin: 0 0;
}

.right-line(@color: #ccc, @zindex: 0) {
    content: '';
    position: absolute;
    z-index: @zindex;
    top: 0;
    right: 0;
    height: 100%;
    border-right: 1PX solid @color;
    color: @color;
    transform: scaleX(.5);
    transform-origin: 100% 0;
}

.around-border (@border-color: #ccc, @radius: 0) {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 1PX solid @border-color;
    transform: scale(0.5);
    transform-origin: 0 0;
    border-radius: @radius*2;
}

//- 圆形
.circle (@width) {
    width: @width;
    height: @width;
    border-radius: 50%;
}

//- 正方形
.square (@width) {
    width: @width;
    height: @width;
}

//- 页面最大宽度
.maxwidth () {
    max-width: @maxwidth;
    margin: 0 auto;
}

// Less 颜色函数
// 1.lighten(@color, 10%);
// 返回的颜色在@color基础上变亮10%
// 2.darken(@color, 10%);
// 返回的颜色在@color基础上变暗10%
// 3.saturate(@color, 10%);
// 返回的颜色在@color基础上饱和度增加10%
// 4.desaturate(@color, 10%);
// 返回的颜色在@color基础上饱和度降低10%
// 5.spin(@color, 10);
// 返回的颜色在@color基础上色调增加10
// 6.spin(@color, -10);
// 返回的颜色在@color基础上色调减少10
// 7.mix(@color1, @color2);
// 返回的颜色是@color1和@color2两者的混合色